<template>
    <div class="box">
        <div class="UserInfo">
            <div class="UserImg">
                <img src="../../assets/image/avator.jpg" alt="">
            </div>
            <div class="userTop">
                <div class="uTop">
                    <div class="userName">
                        {{ User.userName }}
                    </div>
                    <!-- <div class="infoManage">
                            <el-button></el-button>
                        </div> -->
                </div>
                <div class="uMiddle">
                    <span>{{ User.totalVisits }}</span>
                    <p>总访问量&emsp;|&emsp;</p>
                    <span>{{ User.original }}</span>
                    <p>原创&emsp;|&emsp;</p>
                    <span>{{ User.ranking }}</span>
                    <p>排名&emsp;|&emsp;</p>
                    <span>{{ User.fans }}</span>
                    <p>粉丝&emsp;&emsp;</p>
                </div>
                <div class="uBottom">
                    <span>IP属地：{{ User.IP }}</span>
                    <span>加入时间：{{ User.joinTime }}</span>
                    <span>博客简介：{{ User.blogInfo }}</span>
                </div>
            </div>
        </div>
        <div class="InfoMsg">
            <div class="leftMenu">
                <div class="starGrade">
                    <h3>星能等级</h3>
                    <div class="b">
                        <div class="b1">
                            <span>当前等级</span>
                            <span>{{ User.starGrade }}</span>
                        </div>
                        <div class="b1">
                            <span>当前总分</span>
                            <span>{{ User.allScores }}</span>
                        </div>
                        <div class="b1">
                            <span>暂未开放</span>
                            <!-- <span>{{ User.allScores }}</span> -->
                        </div>
                    </div>

                </div>
                <div class="succeed">
                    <h3>个人成就</h3>
                    <div class="achievement">
                        <span>获得&nbsp;<p>{{ User.allLikes }}</p>&nbsp;次点赞</span>
                        <span>内容获得&nbsp;<p>{{ User.allComments }}</p>&nbsp;次评论</span>
                        <span>获得&nbsp;<p>{{ User.allCollection }}</p>&nbsp;次收藏</span>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="header">
                    <el-tabs v-model="contentTabs" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="最近" name="first"></el-tab-pane>
                        <el-tab-pane label="文章" name="second"></el-tab-pane>
                        <el-tab-pane label="资源" name="third"></el-tab-pane>
                        <el-tab-pane label="问答" name="fourth"></el-tab-pane>
                        <el-tab-pane label="帖子" name="fifth"></el-tab-pane>
                        <el-tab-pane label="视频" name="sixth"></el-tab-pane>
                        <el-tab-pane label="关注/订阅/互动" name="seventh"></el-tab-pane>
                        <el-tab-pane label="收藏" name="eighth"></el-tab-pane>
                    </el-tabs>
                    <el-form v-model="queryParams">
                        <el-input type="text" v-model="queryParams.title" placeholder="搜TA的内容" />
                    </el-form>
                </div>
                <div class="body">
                    <RecentVue v-show="contentTabs === 'first'" :items="items" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue'
import RecentVue from './recentBlog.vue'
export default {
    components: {
        RecentVue
    },
    data() {
        return {
            items: [
                {
                    avatar: "../../assets/image/avator.jpg",
                    title: "前端Vue监听路由变化， 点击页面内按钮跳转菜单更改导航菜单选中状态",
                    info: "这里产生这个现象的原因和选中状态大致相同，那就是因为页面重新加载后之前的选中的CSS样式并没有清除，那么我们是不是在生命周期-创建的过程中把CSS样式清除就可以了呢？带着这个问题我查阅了一些资料并翻看了ElementPlus中我使用的组件el-menu、el-menu-item的CSS源码，发现想要清除CSS样式并不容易，甚至是无从下手，但是我们换个思路，既然无法在生命周期-创建中清除他的选中样式，那么我们直接全部清除他的选中样式不就解决问题了吗，但是我",
                    tags: 1,
                    publishTime: "2021-01-01",
                    read: 100,
                    like: 100,
                    comment: 100,
                    collection: 100
                },
                {
                    avatar: "../../assets/image/avator.jpg",
                    title: "前端Vue监听路由变化， 点击页面内按钮跳转菜单更改导航菜单选中状态",
                    info: "这里产生这个现象的原因和选中状态大致相同，那就是因为页面重新加载后之前的选中的CSS样式并没有清除，那么我们是不是在生命周期-创建的过程中把CSS样式清除就可以了呢？带着这个问题我查阅了一些资料并翻看了ElementPlus中我使用的组件el-menu、el-menu-item的CSS源码，发现想要清除CSS样式并不容易，甚至是无从下手，但是我们换个思路，既然无法在生命周期-创建中清除他的选中样式，那么我们直接全部清除他的选中样式不就解决问题了吗，但是我",
                    tags: 0,
                    publishTime: "2021-01-01",
                    read: 100,
                    like: 100,
                    comment: 100,
                    collection: 100
                }
            ],
            contentTabs: ref("first"),
            queryParams: {
                title: ""
            },
            User: {
                userName: "法外狂徒张三",
                totalVisits: 18307,
                original: 543,
                ranking: 2343,
                fans: 2983431,
                IP: "北京市",
                joinTime: "2021-01-01",
                blogInfo: "我是一个程序员",
                starGrade: "LV17",
                allScores: 100,
                allLikes: 100,
                allComments: 100,
                allCollection: 100
            }
        }
    },

    methods: {
        handleClick(tab, event) {
            console.log(tab.props.name);
            this.contentTabs = tab.props.name;
        }
    }
}
</script>
<style>
.box .InfoMsg .content .el-tabs__item {
    font-size: 17px !important;
}
</style>
<style lang="scss" scoped src="./myBlog.scss"></style>